import styles from './index.less';
import { Drawer, Input,Popover,Tag,DatePicker } from 'antd';
import { useEffect, useState } from 'react';
import { CloseOutlined, CalendarOutlined } from '@ant-design/icons';
import IconFont from '@/public/Icon/index';
import 'moment/locale/zh-cn';
// 时间选择器底部英文-->中文
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
interface TaskDetailProps {
  data: data;
  visible: boolean;
  handleClose: () => void;
  timeTag:string;
}
interface data {
  title: string;
  desc: string;
  startTime: string;
  endTime: string;
  status: 'doing' | 'done';

}
export default function TaskDetail(props: TaskDetailProps) {
  const { TextArea } = Input;
  const { data, visible, handleClose,timeTag } = props;
  const [submitData, setSubmitData] = useState({
    title: '',
    desc: '',
    startTime: '',
    endTime: '',
    status: '',
  });
  // 用于时间选择器以及tag使用的时间
  const [defaultTime, setDefaultTime] = useState<any>({
    time: '',
    tag: '',
  });
  const [isBtnShow,setIsBtnShow] = useState(false)
  // 自定义时间时的时间选择器是否展示
  const [datePickShow, setDefinedDatePick] = useState(false);
  // 选择今天 明天
  const chooseDefaultTime = (day: string) => {
    if (day == 'today') {
      const time = moment(moment().format('YYYY-MM-DD 18:00'));
      const tag = `${moment().format('M月DD日')}(今天)18:00`;
      setDefaultTime({ time, tag });
    } else if (day == 'tomorrow') {
      const time = moment(moment().add(1, 'days').format('YYYY-MM-DD 18:00'));
      const tag = `${moment().add(1, 'days').format('M月DD日')}(明天)18:00`;
      setDefaultTime({ time, tag });
    }
  };
    // 在时间选择器中修改日期
    const changeDate = (date:any) => {
        const todayStart = moment(moment().format('YYYY-MM-DD 00:00'));
        const yestardayStart = moment(moment(todayStart).subtract(1, 'days'));
        const todayEnd = moment(moment().format('YYYY-MM-DD 24:00'));
        const tomorrowEnd = moment(moment(todayEnd).add(1, 'days'));
        console.log(tomorrowEnd, 'tomorrowEndtomorrowEnd');
        let today = '';
        if (todayStart < date && date < todayEnd) {
          today = '(今天)';
        } else if (todayEnd < date && date < tomorrowEnd) {
          today = '(明天)';
        } else if (yestardayStart < date && date < todayStart) {
          today = '(昨天)';
        } else {
          today = `(星期${moment(date).day() == 0 ? '日' : moment(date).day()})`;
        }
        setDefaultTime({ time: date, tag: moment(date).format(`MM月DD日 ${today} HH:mm`) });
      };
        // 关闭Tag
  const closeTag = () => {
    setDefinedDatePick(false);
    setIsBtnShow(false)
  };
  useEffect(() => {
    setSubmitData(data);
    setDefaultTime({
        // time:endTime,
        tag:timeTag,
    })
    console.log(timeTag,'timeTagtimeTagtimeTag')
    timeTag?setIsBtnShow(true):setIsBtnShow(false)
  }, [data]);
  console.log(submitData);

  return (
    <Drawer placement="right" onClose={handleClose} visible={visible} keyboard={true} closable={false}>
      <div className={styles.container}>
        <div className={styles.close}>
          <CloseOutlined onClick={handleClose} />
        </div>
        <div className={styles.inputCon}>
          <input
            className={styles.input}
            value={submitData.title}
            onChange={e => {
              setSubmitData({ ...submitData, title: e.target.value });
            }}
          />
        </div>
        <div className={styles.desc}>
          <TextArea
            rows={5}
            showCount={true}
            value={submitData.desc}
            maxLength={100}
            onChange={e => {
              setSubmitData({ ...submitData, desc: e.target.value });
            }}
          />
        </div>
        <div className={styles.calender}>
          <div className={styles.iconCon}>
            <CalendarOutlined style={{ fontSize: '17px' }} />
          </div>
          <div className={styles.dateCon}>
             {
                 !isBtnShow ? (
                  <>
                    <div
                    className={`${styles.time_btn} ${isBtnShow ? styles.disabled : ''}`}
                    onClick={() => {
                        setDefinedDatePick(true)
                      chooseDefaultTime('today');
                    }}
                  >
                    <IconFont type="iconjintian" className={styles.icon} />
                    今天
                  </div>
                  <div
                    className={`${styles.time_btn} ${isBtnShow ? styles.disabled : ''}`}
                    onClick={() => {
                        setDefinedDatePick(true)
                      chooseDefaultTime('tomorrow');
                    }}
                  >
                    <IconFont type="icona-rili2" className={styles.icon} />
                    明天
                  </div>
                  <div
                    className={styles.time_btn}
                    onClick={() => {
                        setDefinedDatePick(true)
                    }}
                  >
                    <IconFont type="icona-rili3" className={styles.icon} />
                    自定义
                  </div>
                  </>
                 ):(
                     <>
                  <Tag closable onClose={closeTag} className={styles.tag} color="gold" style={{ padding: '5px' }} onClick={()=>{setDefinedDatePick(true)}}>
                    {defaultTime.tag}
                  </Tag>
                     </>
                 )
             }
                      <DatePicker
                      showTime
                      open={datePickShow}
                      defaultValue={defaultTime.time}
                      locale={locale}
                      onOk={()=>{setDefinedDatePick(false);setIsBtnShow(true)}}
                      autoFocus
                      onChange={e => {
                        changeDate(e);
                      }}
                    />
           
                    <div className={styles.dateConwrap}></div>                

                  
          </div>
        </div>
      </div>
    </Drawer>
  );
}
